//导入 vue
import Vue from "vue";
// 导入 App 组件
import app from "./App.vue";
// 导入 Vuex包并安装,然后创建实例
import Vuex from "vuex";
Vue.use(Vuex);

//当加载 index 文件的时候,直接获取 localStorage 中的数据,如果没有则获取一个空数组
const car = JSON.parse(localStorage.getItem("car") || "[]");

const store = new Vuex.Store({
  // 得到一个数据仓储对象 store
  state: {
    //大家可以把 state 想象成组件中的 data , 专门用来存储数据的
    count: 0,
    car: car,
  },
  mutations: {
    addToCar(state, goodsToShopCar) {
      //点击加入购物车,把商品信息,保存到 store 中的 car 上
      // 分析:
      // 1. 如果购物车中,之前已经有这个对应的商品了,那么只需要更新数量
      // 2. 如果没有,则直接把商品数据, push 到 car 中即可

      //设置一个标识符,判断购物车中是否有对应的商品了,默认没有找到
      var flag = false;

      state.car.some((item) => {
        //遍历数组中的元素,然后判断,找到后 return true 终止
        if (item.id === goodsToShopCar.id) {
          item.count += parseInt(goodsToShopCar.count);
          //找到了就修改标识符,防止执行 push
          flag = true;
          return true;
        }
      });

      //如果最终, 循环完毕, 得到的 flag 还是 false, 则把商品数据直接 push 到 car 中
      if (!flag) {
        state.car.push(goodsToShopCar);
      }

      //存储到 localStorage 中
      localStorage.setItem("car", JSON.stringify(state.car));
    },
    updateGoodsCount(state, goodsToShopCar) {
      //修改购物车中商品的数量值，并同步到 store 中，覆盖之前的数量值
      state.car.some((item) => {
        //通过id匹配到需要修改的商品
        if (item.id == goodsToShopCar.id) {
          item.count = parseInt(goodsToShopCar.count);
          return true;
        }
      });
      //修改完之后，把最新购物车数据保存到本地
      localStorage.setItem("car", JSON.stringify(state.car));
    },
    removeGoodsFromCarById(state, id) {
      state.car.some((item, index) => {
        //根据 id 来匹配需要删除的商品,用索引去删除
        if (item.id == id) {
          state.car.splice(index, 1);
          return true;
        }
      });
      //修改完之后，把最新购物车数据保存到本地
      localStorage.setItem("car", JSON.stringify(state.car));
    },
    updateGoodsSelectedById(state, info) {
      //循环遍历 car 中的商品，根据 id 匹配商品,修改其 selected 属性
      state.car.some((item) => {
        if (item.id == info.id) {
          item.selected = info.selected;
        }
      });
      //修改完之后，把最新购物车数据保存到本地
      localStorage.setItem("car", JSON.stringify(state.car));
    },
  },
  getters: {
    getShopCarCount(state) {
      var currentShopCarCount = 0;
      //把 car 中的数据包装一下
      state.car.forEach((item) => {
        //循环 car 中每个元素 , 获取他们的 count , 存到currentShopCarCount中
        currentShopCarCount += item.count;
      });
      return currentShopCarCount;
    },
    getGoodsCount(state) {
      var o = {};
      state.car.forEach((item) => {
        //把每项商品的id作为 o 对象中的属性的键，商品的数量作为属性的值
        o[item.id] = item.count;
      });
      return o;
    },
    getGoodsSelected(state) {
      var o = {};
      state.car.forEach((item) => {
        o[item.id] = item.selected;
      });
      return o;
    },
  },
});

//引入 qs 插件
import qs from "qs";
Vue.prototype.$qs = qs;

// 安装 axios 和 vue-axios
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
//设置提交的表单格式
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";
//全局配置统一的请求地址
// axios.defaults.baseURL = 'http://mytestaddr.free.idcfengye.com'

//缩略图插件
import VuePreview from "vue-preview";
Vue.use(VuePreview);
// Vue.use(preview, {
// mainClass: 'pswp--minimal--dark',
// barsSize: {top: 0, bottom: 0},
// captionEl: false,
// fullscreenEl: false,
// shareEl: false,
// bgOpacity: 0.85,
// tapToClose: true,
// tapToToggleControls: false
// })

//导入 moment.js 格式化时间
import moment from "moment";
//定义全局过滤器
Vue.filter("dateFormat", function(dateStr, pettern = "YYYY-MM-DD HH:mm:ss") {
  return moment(dateStr).format(pettern);
});

// 按需导入 Mint-UI组件库
import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
Vue.use(MintUI);

//导入 MUI
import "./lib/dist/css/mui.min.css";
import "./lib/dist/css/icons-extra.css";

//导入路由模块
import router from "./router.js";
//创建 vm 实例对象
var vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  // 渲染 App 组件
  render: (e) => e(app),
  // 挂载路由对象
  router,
  // 挂载 vuex 对象
  store,
});

// console.log(vm.$qs);
